<template>
  <div>
    <app-header />
    <div class="container page-container">
      <div class="login-container">
        <el-card class="login-card">
          <template #header>
            <div class="card-header">
              <h2>管理员登录</h2>
            </div>
          </template>
          
          <el-form 
            ref="loginFormRef"
            :model="loginForm" 
            :rules="loginRules" 
            @submit.prevent="handleLogin"
            label-position="top"
          >
            <el-form-item label="用户名" prop="username">
              <el-input 
                v-model="loginForm.username" 
                prefix-icon="User"
              />
            </el-form-item>
            
            <el-form-item label="密码" prop="password">
              <el-input 
                v-model="loginForm.password" 
                type="password" 
                prefix-icon="Lock" 
                show-password
              />
            </el-form-item>
            
            <el-form-item>
              <el-button 
                type="primary" 
                @click="handleLogin" 
                :loading="loading"
                class="login-button"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
          
          <div class="demo-credentials">
            <p><strong>测试账号</strong>: admin / password</p>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Lock, User } from '@element-plus/icons-vue'
import axios from 'axios'
import AppHeader from '../components/app-header.vue'

const router = useRouter()
const loginFormRef = ref(null)
const loading = ref(false)

const loginForm = ref({
  username: '',
  password: ''
})

const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  if (!loginFormRef.value) return
  
  await loginFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    loading.value = true
    
    try {
      const response = await axios.post('/api/login', {
        username: loginForm.value.username,
        password: loginForm.value.password
      })
      
      const { token, user } = response.data
      
      // Save auth data
      localStorage.setItem('token', token)
      localStorage.setItem('user', JSON.stringify(user))
      
      ElMessage.success('登录成功')
      router.push('/dashboard')
    } catch (error) {
      console.error('Login failed:', error)
      ElMessage.error('登录失败，用户名或密码错误')
    } finally {
      loading.value = false
    }
  })
}
</script>

<style lang="less" scoped>
.login-container {
  max-width: 400px;
  margin: 40px auto;
}

.login-card {
  border-radius: 8px;
  
  .card-header {
    display: flex;
    justify-content: center;
    
    h2 {
      font-size: 24px;
      margin: 0;
      color: #303133;
    }
  }
}

.login-button {
  width: 100%;
}

.demo-credentials {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px dashed #dcdfe6;
  text-align: center;
  color: #909399;
  font-size: 14px;
}
</style>

